<template>
    <div class="home-box">
      <div class="article-header">
        <el-row>
          <el-col :span="12"><div class="grid-content ">
            <el-breadcrumb separator-class="el-icon-arrow-right" style="font-size: 28px">
            <el-breadcrumb-item :to="{ path: '/video' }">视频</el-breadcrumb-item>
            <el-breadcrumb-item></el-breadcrumb-item>
          </el-breadcrumb></div></el-col>
        </el-row>
        <el-row>
          <el-col :span="8"><div class="grid-content " style="font-size: 32px">{{this.video.videotitle}} </div></el-col>
        </el-row>
        <el-row>
          <el-col :span="6"><div class="grid-content ">时间：{{this.video.createtime}}</div></el-col>
          <el-col :span="6"><div class="grid-content ">简介：{{this.video.brief}}</div></el-col>
          <el-col :span="6"><div class="grid-content "></div></el-col>
          <el-col :span="6"><div class="grid-content "><el-dropdown>
  <span class="el-dropdown-link">
    我要分享<i class="el-icon-arrow-down el-icon--right"></i>
  </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>新浪微博</el-dropdown-item>
              <el-dropdown-item>QQ空间</el-dropdown-item>
              <el-dropdown-item>微信</el-dropdown-item>
              <el-dropdown-item >QQ</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown></div></el-col>
        </el-row>
      </div>
<div class="article-main">
  <videoshow :src = this.video.videoaddr videoWidth=815px videoHegiht=530px></videoshow>
</div>

    </div>
</template>

<script>
   import VideoShow from "./VideoShow";
    export default {
        name: "VideoDetail",
      components:{
        videoshow:VideoShow
      },

      data(){
          return{
            video:[]
          }
      },
      created() {
        let data = this.$route.query.video;
        this.video = JSON.parse(data);
      }
    }
</script>

<style scoped>
  .el-row {
    margin-bottom: 20px;
  &:last-child {
     margin-bottom: 0;
   }
  }
  .el-col {
    border-radius: 4px;
  }

  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }

  .el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
  .article-header{
    width: 100%;
    max-height: 170px;
    margin-top:0px;
    border-bottom: #409EFF solid;
    box-sizing: border-box;
  }
  .home-box{
    width: 1240px;
    margin: 0 auto;
    overflow: hidden;
}
.article-main{
  width: 890px;
  margin: 30px auto ;
}
</style>
